<template>
  <div>
    <h2>{{ person }}</h2>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>薪资：{{ job.j1.salary }}k</h2>
    <h2>座驾：{{ person.car }}</h2>
    <button @click="name += '~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">涨薪</button>

    <button @click="showRawPerson">输出原始的person</button>
    <button @click="addCar">添加一台车</button>
    <!-- 如果不是响应式数据，会修改失败，所以更不会达到双向绑定的效果 -->
    <button @click="person.car.name = '迈腾380'">换一台车</button>
  </div>
</template>

<script>
import { markRaw, reactive, toRaw, toRefs } from 'vue';

export default {
  name: 'test_toRef_toRefs',
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    function showRawPerson() {
      // toRaw只能修改 reactive处理过的响应式对象，变成普通对象
      const p = toRaw(person)
      console.log('---', p);
    }

    function addCar() {
      let car = { name: '奔驰', price: '50w' }
      // person.car = car
      // 使用 markRaw 标记一个对象，不会再成为响应式对象
      person.car = markRaw(car)
    }

    return {
      person,
      ...toRefs(person),
      showRawPerson,
      addCar
    }
  }
}
</script>
